{% extends "layout/content.twig" %}

{% block main %}
    <div class="layui-card">
        <div class="layui-card-header">
            {{ __('wechat.title') }}
        </div>

        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">{{ __('wechat.setting') }}</li>
                    <li class="">{{ __('wechat.menu') }}</li>
                    <li class="">{{ __('wechat.event') }}</li>
                    <li class="">{{ __('wechat.material') }}</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        {% include "wechat/setting.twig" %}
                    </div>
                    <div class="layui-tab-item ">
                        {% include "wechat/menu.twig" %}
                    </div>
                    <div class="layui-tab-item ">
                        {% include "wechat/event.twig" %}
                    </div>
                    <div class="layui-tab-item ">
                        {% include "wechat/material.twig" %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include "wechat/event/template.twig" %}

{% endblock %}

{% block script %}

    <script type="text/javascript">
        const save_config_url = '{{ auth_route('wechat/saveConfig') }}'
        let menus = `{{ setting.menu|raw }}`
        let event_subscribe = `{{ setting.subscribe|raw }}`
        let keyword_setting = `{{ setting.keyword|raw }}`


        try {
            if (menus) {
                menus = JSON.parse(menus)
            } else {
                menus = [
                    {
                        'name': '菜单名称',
                        'key': 'key',
                        'type': 'click'
                    }
                ]
            }

            if (event_subscribe) {
                event_subscribe = JSON.parse(event_subscribe)
            }

            if (keyword_setting) {
                keyword_setting = JSON.parse(keyword_setting)
            }

        } catch (e) {
            menus = [
                {
                    'name': '菜单名称',
                    'key': 'key',
                    'type': 'click'
                }
            ]
        }
    </script>

    {% include "wechat/script/event.twig" %}
    {% include "wechat/script/material.twig" %}
    {% include "wechat/script/menu.twig" %}

    <script type="text/javascript">


        layui.use(['http', 'toast', 'form', 'upload', 'table', 'clipboard'], function () {

            let http = layui.http
            let form = layui.form
            let toast = layui.toast
            let upload = layui.upload

            materialInit(layui)
            menuInit(layui)

            form.val('event-subscribe-form', {
                method: event_subscribe.method || 'response'
            })

            form.val('keyword-form', {
                method: keyword_setting.method || 'response'
            })

            upload.render({
                elem: '#upload-wechat-qrcode',
                url: '{{ auth_route('home/upload') }}',
                data: {
                    name: 'file'
                },
                accept: 'images',
                done: function (res) {
                    if (res.code) {
                        toast.top(res)
                        $('#wechat-qrcode-preview').addClass('layui-hide')
                        return false
                    }

                    if (res.data.url) {
                        $('[name=wechat_qrcode]').val(res.data.url)
                        $('#wechat-qrcode-preview').removeClass('layui-hide')
                        $('#wechat-qrcode-preview img').attr('src', res.data.url)
                    }
                }
            })

            let upload_load = 0
            upload.render({
                elem: '#upload-material-drag',
                url: '{{ auth_route('wechat/uploadMaterial') }}',
                data: material_data,
                accept: 'file',
                auto: false,
                bindAction: '#upload-material-submit',
                before: function () {
                    material_data.remark = $('[name=remark]').val()
                    material_data.video_title = $('[name=video_title]').val()
                    material_data.video_desc = $('[name=video_desc]').val()
                    upload_load = layer.msg('提交中,请稍后', {
                        icon: 16,
                        time: false,
                        shade: 0.8
                    })
                    setTimeout(function () {
                        layer.close(upload_load)
                    }, 5000)
                },
                done: function (res) {
                    layer.close(upload_load)
                    toast.top(res)
                }
            })

            $('[lay-filter=menu-setting] input').on('blur', function () {
                saveMenu(form)
            })

            form.on('submit(wechat-material)', function (d) {
                return false
            })

            form.on('radio(menu_type)', function (data) {
                let elem = data.elem
                menuTypeChoose(elem.value)
                saveMenu(form)
            })

            form.on('radio(material_long)', function (data) {
                let elem = data.elem
                material_data.long = elem.value
            })

            form.on('radio(material_type)', function (data) {
                let elem = data.elem
                let item = $('#video-layui-form-item')
                if (elem.value === 'video') {
                    item.removeClass('layui-hide')
                } else {
                    item.addClass('layui-hide')
                }
                material_data.type = elem.value
            })

            // 保存微信公众号配置
            form.on('submit(wechat)', function (d) {
                let fields = d.field
                delete fields.file
                fields.qrcode = $('[name=wechat_qrcode]').val()
                http.post(save_config_url,
                    {
                        'group': 'wechat',
                        setting: fields,
                    })
                    .then(res => {
                        toast.top(res)
                    })
                return false
            })

            // 保存微信菜单配置
            form.on('submit(menu-setting-save)', function (d) {
                http.post(save_config_url,
                    {
                        'group': 'wechat',
                        setting: {
                            menu: menus
                        },
                    })
                    .then(res => {
                        toast.top(res)
                    })
                return false
            })

            // 重置公众号菜单
            form.on('submit(reset-wechat-menu)', function (d) {
                http.post('{{ auth_route('wechat/resetMenu') }}')
                    .then(res => {
                        toast.response(res)
                    })
                return false
            })

            // 保存关注公众号事件回复
            form.on('submit(wechat-event-subscribe)', function (data) {

                let field = data.field

                let replay = []
                $('#replay-container [data-message]').each(function () {

                    let type = $(this).data('message')
                    let content = $(this).val()

                    replay.push({
                        type: type,
                        content: content,
                    })
                })

                http.post('{{ auth_route('wechat/saveConfig') }}',
                    {
                        setting: {
                            subscribe: {
                                method: field.method,
                                replay: replay,
                            }
                        },
                    })
                    .then(res => {
                        toast.top(res)
                    })
                return false
            })

            // 保存关键字回复
            form.on('submit(wechat-event-keyword)', function (data) {

                let field = data.field
                let post = []

                $('#keyword-container .layui-form-item').each(function () {

                    let keyword = $(this).find('[name=keyword]').val()

                    let message = []
                    $(this).find('.message-item [data-message]').each(function () {

                        let name = $(this).data('message')
                        let val = $(this).val()
                        if (val) {
                            message.push({
                                type: name,
                                content: val
                            })
                        }
                    })

                    post.push({
                        keyword: keyword,
                        message: message
                    })
                })

                http.post('{{ auth_route('wechat/saveConfig') }}',
                    {
                        setting: {
                            keyword: {
                                method: field.method,
                                replay: post,
                            }
                        },
                    })
                    .then(res => {
                        toast.top(res)
                    })
                return false
            })
        })
    </script>
{% endblock %}